<template>
  <div>
    <el-dialog
      :title="textMap"
      :visible.sync="dialogCorrelationFactorTabsVisibleCom"
      width="827px"
      append-to-body>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :key="item.name"
          v-for="(item) in editableTabs"
          :label="item.title"
          :name="item.name"
        >
          <CorrelationFactorTabsFactorTransferItem
            ref="correlationFactorTabsFactorTransferItem"
            :titles="['未选','已选']"
            :value.sync="factorValue"
            :data="factorData"
            @factortransferTabsEmit="factortransferTabsEmit"
          />
        </el-tab-pane>
        <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
// 组成因子组件
import CorrelationFactorTabsFactorTransferItem from './CorrelationFactorTabsFactorTransferItem'
import XEUtils from 'xe-utils'
import {addfactordata, findfactormapingdate, fingfactorcodmapingin,} from '../service/baseApi'

export default {
  name: 'CorrelationFactorTabs',
  components: {
    CorrelationFactorTabsFactorTransferItem
  },
  props: {
    textMap: {
      type: String
    },
    dialogCorrelationFactorTabsVisible: {
      type: Boolean,
      default: false
    },
    /* 当前选中方案 */
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    },
    /* 当前选中方案的已选因子 */
    factorSelected: {
      type: Array,
      default() {
        return []
      }
    },
    /* 当前选中节点 */
    // sonCurrentRow: {
    //   type: Object,
    //   default() {
    //     return {}
    //   }
    // },
  },
  // 定义属性
  data() {
    return {
      activeName: '',
      editableTabs: [
        //   {
        //   title: 'Tab 1',
        //   name: '1',
        //   content: 'Tab 1 content'
        // }, {
        //   title: 'Tab 2',
        //   name: '2',
        //   content: 'Tab 2 content'
        // }, {
        //   title: 'Tab 3',
        //   name: '3',
        //   content: 'Tab 3 content'
        // }, {
        //   title: 'Tab 4',
        //   name: '4',
        //   content: 'Tab 4 content'
        // }
      ],
      /* 关联因子穿梭框 */
      factorValue: [],
      factorData: [],


    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    dialogCorrelationFactorTabsVisibleCom: {
      get() {
        return this.dialogCorrelationFactorTabsVisible
      },
      set(val) {
        this.$emit('update:dialogCorrelationFactorTabsVisible', val)
      }
    },
  },
  // 监控data中的数据变化
  watch: {
    factorSelected() {
      this.editableTabs = []
      console.log('this.factorSelected',this.factorSelected);
      this.activeName = this.factorSelected[0].adj_ft_code
      this.editableTabs = XEUtils.map(this.factorSelected, item => {
        return {
          title: item.adj_ft_name,
          name: item.adj_ft_code,
        }
      })
      // 重置穿梭框数据
      this.initEditableTabs()
    },
    currentRow() {
      this.initEditableTabs()
      console.log('currentRowcurrentRow', this.currentRow);
    }
  },
  // 方法集合
  methods: {
    // 重置穿梭框数据
    initEditableTabs() {
      if (!XEUtils.isEmpty(this.factorSelected) && !XEUtils.isEmpty(this.currentRow)) {
        this.findFindfactormapingdate(this.factorSelected[0].adj_ft_code)
        this.findFingfactorcodmapingin(this.factorSelected[0].adj_ft_code)
      }
    },
    handleClick(tab, event) {
      this.findFindfactormapingdate(tab.name)
      this.findFingfactorcodmapingin(tab.name)
      console.log(tab.name);
    },
    // 当前因子下的数据
    findFindfactormapingdate(factor_code) {
      findfactormapingdate({
        factor_code
      }).then(({data}) => {
        this.factorData = XEUtils.map(data.rows, (item) => {
          return {
            label: `${item.code}-${item.name}`,
            key: item.code,
            disabled: false
          }
        })
      })
    },
    // 当前因子下已选数据
    findFingfactorcodmapingin(factor_code) {
      console.log('this.currentRow.idthis.currentRow.id', this.currentRow.id);
      fingfactorcodmapingin({
        factor_code: factor_code,
        node_id: this.currentRow.id,
      }).then(({data}) => {
        this.factorValue = []
        XEUtils.arrayEach(data.rows, (item, key) => {
          this.factorValue.push(item.code)
        })
      })
    },
    // 修改因子api
    findAddfactordata(factor_data_code) {
      addfactordata({
        node_id: this.currentRow.id,
        factor_code: this.activeName,
        factor_data_code
      })
    },
    /* 修改因子事件 */
    factortransferTabsEmit(val) {
      this.findAddfactordata(val.join(','))
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('dangqianxuanzhongyinzi ', this.factorSelected);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

</style>